<template lang="pug">
.home
  //- h3 最新
  .item(
    v-infinite-scroll="getArticleList",
    infinite-scroll-distance="10",
    infinite-scroll-delay="1000",
    infinite-scroll-disabled="loading"
  )
    home-list(
      v-for="item in articleList",
      :key="item.aid",
      :articleItem="item"
    )
    p(v-if="loading") 已加载全部
</template>

<script>
import HomeList from "../components/HomeItem";
export default {
  name: "Home",
  components: {
    HomeList,
  },
  data() {
    return {
      page: 0,
      articleList: [],
      loading: false,
    };
  },
  methods: {
    getArticleList() {
      this.$http.get(`/articles?page=${this.page}`).then((res) => {
        if (res) {
          // console.log(res.data.data);
          this.articleList = this.articleList.concat(res.data.data.articleList);
          this.page++;
          if (this.page === res.data.data.allPage) {
            this.loading = true;
          }
        }
      });
    },
  },
  created() {
    this.getArticleList();
  },
};
</script>

<style lang="less">
.home {
  width: 60%;
  margin: 20px auto 0 auto;
  .item {
    height: calc(100vh - 83px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  @media screen and (max-width: 780px) {
    width: 95%;
  }
}
</style>
